<!DOCTYPE html>
<style>
    #t { width: 600px; height: 400px; }
    #t::first-line { background-color: red; }
    #t:hover::first-line { background-color: green; }
</style>
<div id="t">
    <div>
        <p>This text should have a green background when hovered.</p>
    </div>
</div>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
runAfterLayoutAndPaint(function() {
  if (window.eventSender)
    eventSender.mouseMoveTo(100, 100); // Hover.
  document.body.offsetTop; // Update layout for the hovered state.
}, true);
</script>
